<template>
  <div class="billStateWrapper">
    <div class="wrapper">
      <span class="billState" :class="[printState]" v-if="printState==='printed'">{{ name }}</span>
    </div>
  </div>
</template>
<script  setup>
import tool from "@/utils/tool";
import {computed} from "vue";

const model = defineModel({})
const printState = computed(() => {
  return tool.xe.toNumber(model.value) === 0 ?'unprint':'printed'
})
const name = computed(() => {
  return printState.value === 'printed' ?'已打印':'未打印'
})

</script>
<style scoped lang="scss">
.billStateWrapper {
  box-sizing: border-box;
  height: 28px;
  line-height: 28px;
  text-align: center;
}

.billState {
  font-weight: bolder;
  &.unprint {
    color: grey;
    border: 2px solid grey;
    padding: 2px 10px;
  }
  &.printed{
    color: red;
    border: 3px solid red;
    padding: 2px 10px;
  }
}

</style>
